<template>
	<view class="outBox">
    <u-navbar leftText="支付成功" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '支付成功' }}</text>
      </view>
    </u-navbar>
    <view class="bgBox"></view>
     <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop object-fit="cover"></video>

    <view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
			<view class="sucImg">
				<image src="/static/reservation/img1.png" mode="widthFix"></image>
				<text>支付成功</text>
			</view>
			<view class="itemBox">
				<view class="tit">
					<text>预定信息</text>
				</view>
				<view class="info">
					<view class="table">
						<text>{{curTable.counterNo}}</text>
					</view>
					<view class="text">
						<text>{{curTime}}</text>
					</view>
				</view>
			</view>
      <view class="btns">
        <view class="btnOut" >
          <view class="btn" @click="backHome">
            返回首页
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'
  import itemBg from "@/static/order/itemBg.png"
	export default {
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				menuHeight: 0,
				// 支付类型 1一口价 2 竞价
				type: 1,
				// 当前日期
				curTime: '',
				curTable: {},
				orderInfo: {},
        videoUrl: this.$videoUrl,
        itemBg:itemBg,
			}
		},
		onLoad(e) {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			this.type = e.type

			this.initData()
		},
		methods: {
			backHome(){
					uni.switchTab({
						url:'/pages/home/index'
					})
			},
			// 初始化数据
			initData() {
				this.curTime = this.getFormattedDate()
				this.curTable = uni.getStorageSync('curTable')
				this.orderInfo = uni.getStorageSync('orderInfo')
			},
			// 获取时间
			getFormattedDate(date = new Date()) {
				let year = date.getFullYear();
				let month = (`0${date.getMonth() + 1}`).slice(-2); // 月份是从0开始的，所以+1，并且保证两位数
				let day = (`0${date.getDate()}`).slice(-2); // 保证日期是两位数
				let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				let weekDay = weekDays[date.getDay()];

				return `${year}-${month}-${day} ${weekDay}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
.btns {
  margin-top: 46rpx;
  margin-bottom: 80rpx;
  .btnOut {
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
  }


  .btn {
    font-size: 32rpx;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 110rpx;
    line-height: 110rpx;
    background: #0FC6C2;
    border-radius: 64rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    position: relative;

    .iconImg {
      width: 32rpx;
      margin-left: 8rpx;
    }

    .myText {
      text {
        font-weight: 600;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}
	.sucImg{
		margin: 100rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text{
      font-weight: 500;
      font-size: 36rpx;
      color: #FFFFFF;
      line-height: 36rpx;
      text-align: center;
      font-style: normal;
		}
		image{
			width: 204rpx;
			margin-bottom: 40rpx;
		}
	}
	.tit {
		margin-bottom: 20rpx;

		text {
			color: #f3f3f3;
			font-size: 34rpx;
		}
	}

	.btn {
		text-align: center;
		background-color: #76a834;
		border-radius: 20rpx;
		line-height: 80rpx;

		text {
			font-size: 36rpx;
			color: #fff;
			letter-spacing: 8rpx;
		}
	}

	.itemBox {
    box-sizing: border-box;
    .tit{
      font-weight: 500;
      font-size: 28rpx;
      color: #86909C;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }
		.info {
			display: flex;
      background-color: rgba(14, 46, 42, 0.7);
      padding: 30rpx;
      margin-bottom: 30rpx;
      border-radius: 40rpx;
			.table {
        width: 186rpx;
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0FC6C2;
        border-radius: 30rpx;

				text {
          font-weight: 600;
          font-size: 48rpx;
          color: #FFFFFF;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
				}
			}

			.text {
        flex: 1;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 32rpx;
        text-align: left;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
			}
		}
	}

	.content {
		position: relative;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		min-height: calc(100vh - 40rpx);
    z-index: 9;
	}

	.left-slot {
		color: #fff;
    display: flex;
    align-items: center;
		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
	}
</style>
